<template>
  <v-div position="relative">
    <v-nav-bar :top="isPc?'0':'50px'" @open="handleOpen" @close="handleClose" :routers="getRoutes"
               :collapse="isCollapse"/>
    <v-div :ml="isPc?isCollapse?'50px':'160px':'0'">
      <main-header :is-collapse="isCollapse" @toggle="handleMenu"/>
      <v-main :ml="isPc?'10px':isCollapse?'50px':'160px'">
        <app-main/>
      </v-main>
    </v-div>
  </v-div>
</template>

<script>
  import tools from '../../utils/util'
  import AppMain from './template/appMain'
  import MainHeader from './template/header'

  export default {
    data () {
      return {
        isCollapse: false,
        isPc: true,
        screenWidth: document.body.clientWidth
      }
    },
    components: {
      MainHeader,
      AppMain
    },
    computed: {
      getRoutes: () => {
        console.log('1111' + tools.getData('routers'))
        return tools.getData('routers') || []
      }
    },
    mounted() {
      this.handleResize();
      window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
    },
    methods: {
      handleMenu (evt) {
        console.log(evt)
        console.log(this.isCollapse)
        this.isCollapse = !this.isCollapse
        console.log(this.isCollapse)

      },
      handleResize() {
        this.isPc = document.documentElement.clientWidth > 768;
      },
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>

